@import '../custom.less';

@grid-toolbar-prefix-cls: ~'@{css-prefix}grid-toolbar';
@grid-tools-prefix-cls: ~'@{css-prefix}grid-tools';
@grid-fullscreen-prefix-cls: ~'@{css-prefix}grid-fullscreen';
@grid-refresh-prefix-cls: ~'@{css-prefix}grid-refresh';
@grid-custom-prefix-cls: ~'@{css-prefix}grid-custom';
@grid-checkbox-prefix-cls: ~'@{css-prefix}grid-checkbox';
@grid-select-toolbar-prefix-cls: ~'@{css-prefix}grid__select-toolbar';
@dropdown-prefix-cls: ~'@{css-prefix}dropdown';

// toolbar
.@{grid-toolbar-prefix-cls} {
  @apply pt-3 pb-2 px-0;

  // Tiny 新增，工具栏容器为空则不需要占位
  &:empty {
    @apply hidden;
  }

  &:after {
    @apply content-[''];
    @apply block;
    @apply clear-both;
    @apply h-0;
    @apply overflow-hidden;
    @apply invisible;
  }

  &.is__loading {
    @apply relative;

    &:before {
      @apply content-[''];
      @apply absolute;
      @apply top-0;
      @apply left-0;
      @apply w-full;
      @apply h-full;
      @apply ~'z-[1]';
      @apply bg-black bg-opacity-20;
    }
  }

  &.size__small,
  &.size__mini {
    @apply py-2 px-0;
  }

  &.size__medium {
    .@{grid-refresh-prefix-cls}__btn,
    .@{grid-custom-prefix-cls}__setting-btn {
      font-size: 17px;
    }
  }

  &.size__small {
    .@{grid-refresh-prefix-cls}__btn,
    .@{grid-custom-prefix-cls}__setting-btn {
      font-size: 15px;
    }
  }

  &.size__mini {
    .@{grid-refresh-prefix-cls}__btn,
    .@{grid-custom-prefix-cls}__setting-btn {
      @apply text-sm;
    }
  }

  .@{grid-tools-prefix-cls}__wrapper,
  .@{grid-fullscreen-prefix-cls}__wrapper,
  .@{grid-refresh-prefix-cls}__wrapper,
  .@{grid-custom-prefix-cls}__wrapper {
    float: right;
    @apply h-7;
    @apply leading-7;
    @apply rounded-sm;
    @apply text-center;
    @apply my-0 mx-2;
    @apply flex;
    @apply items-center;
    @apply justify-center;
  }

  .@{grid-custom-prefix-cls}__wrapper {
    @apply relative;

    &.is__active {
      .@{grid-custom-prefix-cls}__setting-btn {
        @apply border-color-border-focus;
      }

      .@{grid-custom-prefix-cls}__option-wrapper {
        @apply block;
      }
    }
  }

  .@{grid-refresh-prefix-cls}__btn,
  .@{grid-fullscreen-prefix-cls}__btn,
  .@{grid-custom-prefix-cls}__setting-btn {
    @apply text-base;
    @apply align-middle;
    @apply cursor-pointer;
    @apply select-none;
    @apply flex;

    &:hover {
      @apply border-color-border-focus;
    }

    & > i {
      @apply block;
      @apply text-color-brand;
      @apply leading-7;
    }

    svg {
      @apply fill-color-icon-primary;
      @apply text-xl;
      @apply h-5;
      @apply w-5;

      &:hover {
        @apply fill-color-brand-hover;
      }
    }
  }

  .@{grid-custom-prefix-cls}__option-wrapper {
    @apply hidden;
    @apply absolute;
    @apply right-0;
    @apply text-left;
    @apply bg-color-bg-1;
    @apply ~'z-[19]';
    max-height: 210px;
    @apply overflow-auto;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);

    .@{grid-custom-prefix-cls}__option {
      padding: 5px 5px;
      @apply border border-solid border-color-border;
      @apply rounded-sm;
      @apply font-bold;
      @apply text-sm;

      > .@{grid-checkbox-prefix-cls} {
        @apply block;
        padding: 5px;
        @apply m-0;
        max-width: 180px;
        @apply overflow-hidden;
        @apply text-ellipsis;
        @apply whitespace-nowrap;
      }
    }
  }
}

.@{grid-select-toolbar-prefix-cls} {
  @apply absolute;
  @apply bg-color-bg-1;

  .@{grid-toolbar-prefix-cls} {
    @apply ~'py-0.5' pr-0 ~'pl-1.5';
  }
}
